<template>
	<view>
		<view>数据绑定</view>
		<view class="">
			{{ count }}
		</view>
		<button @click="count++">+1</button>
		<hr />
		<view class="">
			属性绑定
		</view>
		<view class="active">
			123
		</view>
		<view :class="[className, { active2: false }]" class="active1">
			123
		</view>
		<view class="">
			循环
		</view>
		<input type="text" v-model="value"/>
		<button @click="handleAdd">添加</button>
		<view v-for="(item,index) in list" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			handleAdd() {
				this.list.push(this.value)
			}
		},
		data() {
			return {
				count: 1,
				className: 'active',
				list: ['a', 'b', 'c', 'd'],
				value: ''
			};
		}
	}
</script>

<style lang="scss">
.active {
	color: red;
}


.active1 {
	font-size: 100px;
}

.active2 {
	font-weight: bold;
}
input {
	border: 1px solid #ccc;
}
</style>